<template>
  <div class="container_detail coupon-edit">
    <div class="header">
      <p v-if="type == 'more'">福利卡管理>批量添加福利卡</p>
      <p v-else>福利卡管理>添加福利卡</p>
      <el-button class="link" type="primary">
        <router-link :to="{path:'couponList',query: { pageIndex: currentPage }}" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form
        :model="user"
        :rules="rules"
        ref="user"
        label-width="150px"
        class=""
       >
       <el-form-item
          v-if="type == 'more'"
          label="福利卡券数量："
          prop="num"
        >
          <el-input-number style="width:220px" v-model="user.num" @change="handleChange" :min="1"></el-input-number>
        </el-form-item>
       <el-form-item
          label="福利卡券名称："
          prop="couponName"
        >
           <el-input
              v-model="user.couponName"
              placeholder="请输入"
            ></el-input>
        </el-form-item>
        <el-form-item
          label="使用范围描述："
          prop="useRangeDetail"
        >
            <el-input
             style="width:220px"
              type="textarea"
              :rows="5"
              v-model="user.useRangeDetail"
              placeholder="请输入"
            ></el-input>
        </el-form-item>
        <el-form-item
          label="使用范围描述："
          prop="price"
        >
            <el-transfer 
             style="margin-bottom:30px"
             :titles="['商品分类', '限定范围']"
             v-model="sortSelect" :data="sortArr"></el-transfer>
             <el-transfer 
             :titles="['商品品牌', '限定范围']"
             v-model="brandSelect" :data="brandArr"></el-transfer>
        </el-form-item>
         <el-form-item
        label="类型："
        prop="categoryId"
        >
            <el-select v-model='user.type' placeholder='-请选择-'  style="height: 30px;  line-height: 30px;width:200px;">
                <el-option
                v-for="item in typeArr"
                :key="item.value"
                :label="item.name"
                :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item
          label="总金额："
          prop="price"
        >
           <el-input
              v-model="user.price"
              placeholder="请输入"
            ></el-input>
        </el-form-item>
        <el-form-item
          label="有效期："
          prop="validTime"
        >
             <el-date-picker
                v-model="user.validTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary" :loading="loading1"
                @click="handleSave('user')"
                style="margin-left:150px"
            >保存</el-button>
          <el-button class="link" type="primary">
            <router-link :to="{path:'couponList',query: { currentPage: currentPage }}" style="color: #fff;">返回</router-link>
        </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
let countryArr = require("../../../static/city.json");
export default {
  data() {
    return {
      id: "",
      info: "",
      // 返回 导航页码
      currentPage: 1,
      typeArr:[
        {
            name:'实体卡',
            value:'real'
        },
         {
            name:'虚拟卡',
            value:'virtual'
        }
      ],
      user: {
        "couponName": "",
        "id": "",
        "num":1,
        "price": "",
        "type": "",
        "useRangeBrandId": "",
        "useRangeCategoryId": "",
        "useRangeDetail": "",
        "validTime": ""
        },
      rules: {
        couponName: [{ required: true, message: "请输入福利卡券名称", trigger: "blur" }],
        price: [
          { required: true, message: "请输入金额", trigger: "blur" }
        ]
      },
      content:"",
      type:'',
      brandArr:[],
      sortArr:[],
      sortSelect:[],
      brandSelect:[],
      type:'',
      loading1:false
    };
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.type = this.$router.currentRoute.query.type;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
      let sessionId = sessionStorage.getItem("sessionId");
      this.upLoadUrl =
      CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
    this.getBrandList()
    this.getSort()
    if(this.id){
      this.getDetail();
    }
  },
  components: {
    "bg-editor": () => import("../common/bg-editor.vue")
  },
  methods: {
      returnName(val){
          let str;
          this.typeArr.map(item=>{
              if(item.value == val){
                  str = item.name
              }
          })
          return str
      },
      getSort: function() {
        let url = CONSTANT.URL.LIST.findEsCategoryByPage;
        let data = {
            pageIndex: 1,
            pageSize:1000
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
            let data = res.data.bussData;
            data.map(item=>{
                this.sortArr.push({
                    key:item.id,
                    label:item.categoryName
                })
            })
        });
      },
      handleImageRemove(file, fileList) {
        let list = []
        fileList.map((item, index) => {
          this.fileList.map((item1, index1) => {
            if (item.url == item1.url) {
              list.push(item1)
            }
          })
        })
        this.fileList = list
      },
      beforeAvatarUpload(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        common.requestAjax(url,null, param, res => {
          this.upLoadUrl = res.data.bussData.uploadUrl;
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
            this.fileList.push({
              url: res.data.bussData.downloadUrl,
              fileKey: res.data.bussData.fileKey,
            })
            console.log(this.fileList,'fileListfileList')
          })
        });
      },
    setPassword(){
        this.user.psw = 123456
        this.user.psw2 = 123456
    },
    getBrandList: function() {
      let url = CONSTANT.URL.LIST.findEsBrandByPage;
      let data = {
        pageIndex:1,
        pageSize: 1000
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
            data.map(item=>{
                this.brandArr.push({
                    key:item.id,
                    label:item.brandName
                })
            })
      });
    },
     getDetail() {
      let url = CONSTANT.URL.LIST.findEsCouponById;
      let data = { id: this.id }
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
        let arr=[],arr1=[]
        data.useBrandDTO.map(item=>{
            arr.push(item.id)
        })
        data.useCategoryDTO.map(item=>{
            arr1.push(item.id)
        })
        if(arr.length){
           this.brandSelect = arr
           data.useRangeBrandId =  arr.join(',')
        }
        if(arr1.length){
          this.sortSelect = arr1
          data.useRangeCategoryId =  arr1.join(',')
        }
        this.user= {
            "couponName": data.couponName,
            "id":data.id,
            "num":data.num,
            "price":data.price,
            "type": data.type,
            "useRangeBrandId": data.useRangeBrandId,
            "useRangeCategoryId": data.useRangeCategoryId,
            "useRangeDetail": data.useRangeDetail,
            "validTime": data.validTime
        }
      });
    },
    checkImage(url) {
      this.pictureUrl = url;
      this.dialogVisible = true;
    },
    handleSave: function(formName) {
      if(this.sortSelect.length){ 
          this.user.useRangeCategoryId = this.sortSelect.join(',')
      }
      if(this.brandSelect.length){
          this.user.useRangeBrandId = this.brandSelect.join(',')
      }
      this.loading1 = true
      this.$refs[formName].validate(valid => {
        if (valid) {
            this.user.validTime = this.user.validTime.split(' ')[0]+' '+'23:59:59'
            let url = CONSTANT.URL.LIST.saveEsCoupon;
          common.requestAjax(url, JSON.stringify(this.user), null, res => {
            this.loading1 = false
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.$router.push({
                path: "/couponList",
                query: { pageIndex: this.currentPage }
              });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.coupon-edit {
  .el-form-item {

    
  }
    .el-input {
      width:220px;
    }
    .el-select {
      width: 220px;
      .el-input {
        width: 100%;
      }
    }

  .item-value {
    .el-input {
      width:220px;
    }
    .el-select {
      width: 220px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>

